<template>
  <div>
    <el-row class="table-grid-content">
      <el-col :span="24" class="grid">
        <el-input v-model="input" placeholder="请输入搜索关键字"></el-input>
      </el-col>
    </el-row>
    <el-table
      :data="table"
      border
      style="width: 100%"
      max-height="540px"
    >
      <el-table-column
        align="center"
        prop="usersName"
        label="姓名">
      </el-table-column>
      <el-table-column
        align="center"
        prop="userMajor"
        label="专业">
      </el-table-column>
      <el-table-column
        align="center"
        prop="userClass"
        label="班级">
      </el-table-column>
      <el-table-column
        align="center"
        prop="usersId"
        label="学号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="gameName"
        label="比赛名称">
      </el-table-column>
      <el-table-column
        align="center"
        prop="addtype"
        label="加分类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="awardedTime"
        label="日期">
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
        <el-button type="primary" @click="shenpi(scope.row)" >审批</el-button>
        </template>
        <!--    修改弹窗-->
        <el-dialog
          title="审批"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose"
          :append-to-body="true">

          <el-form :model="user" label-width="80px">
            <el-form-item>
              <span>加分原因：</span>
              <el-input type="textarea" autosize v-model="user.gameName" class="name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item>
              <span>加分分数：</span>
              <el-input  v-model="user.score" class="name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item>
            <span>加分类型:</span>
                <el-input  v-model="user.addtype" class="name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item>
              <span>上传Id:</span>
              <el-input  v-model="user.uploadingId" class="name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item>
            <span>证明材料：</span>
              <el-image :src="user.materials" ></el-image>
            </el-form-item>
            <el-form-item prop="isPass">
              <span>比赛是否通过：</span>
              <el-radio-group v-model="user.stateId">
                <el-radio v-model="radio" label="1" border>通过</el-radio>
                <el-radio v-model="radio" label="0" border>驳回</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="user.stateId == 0">
              <span>驳回原因：</span>
              <el-input   type="textarea" autosize v-model="user.statueCause" class="name"></el-input>
            </el-form-item>
            <el-form-item>

                <el-button type="primary" @click="onSubmit()"
                           style="
                   position: relative;
                   left: 50%;
                   transform: translateX(-50%);"
                >确认审批</el-button>

            </el-form-item>
          </el-form>
        </el-dialog>

      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
    <el-main>
      <!--在这里展示视图-->
      <router-view/>
    </el-main>
  </div>
</template>

<style scoped lang="scss">
.table-grid-content {
  border-radius: 8px;
  height: 50px;
  background: #ebeef5;
  padding: 5px;
  margin: 0;
}

//取消下划线
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

.el-main{
  padding: 10px;
}

</style>

<script>
import axios from "_axios@0.26.1@axios";

export default {
  name: 'ExaminationApprovalBrowse',

  mounted() {
    //页面加载完成后异步请求查询所有数据
    this.selectAll();
  },

  methods: {
    // //审批
    // amend(row){
    //   this.dialogVisible = true;
    //   this.user = row;
    // },

    //查询所有函数
    selectAll() {
      axios.get('/api/awarded/not-reviewed-page?currentPage=' + this.currentPage + "&pageSize=" + this.pageSize).then((res) => {

        console.log(res)
        //设置表格数据
        this.tables = res.data.data.dataList;

        //设置总记录数
        this.totalCount = res.data.data.pageTotal;
      })
    },

    shenpi(row) {
      this.dialogVisible = true
      this.user = row
    },

    handleClose(){
      this.dialogVisible = false;
    },

    //确认审批
    onSubmit() {
          axios.post("/api/awarded/audit?stateId="+ this.user.stateId + "&statueCause=" + this.user.statueCause + "&uploadingId=" + this.user.uploadingId ).then((res)=>{
            if (res.data.resultCode === 200){
              this.$message.success(res.data.message)
              this.dialogVisible = false
            }else {
              this.$message.error(res.data.message)
            }
          })
      this.selectAll();
    },

    //分页功能
    handleSizeChange(val) {
      //重新设置每页显示的条数
      this.pageSize = val;
      this.selectAll();
    },
    handleCurrentChange(val) {
      //重新设置当前页码
      this.currentPage = val;
      this.selectAll();
    },

    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    goBack() {
      console.log('go back');
    },
  },
  computed: {

    // 搜索框
    table() {
      const input = this.input
      if (input) {
        return this.tables.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().indexOf(input) > -1
          })
        })
      }
      return this.tables
    }
  },
  data() {
    return {
      //分页
      //当前页码
      currentPage: 1,
      //每页显示条数
      pageSize: 10,
      //总记录数
      totalCount: 100,

      //表格数据
      tables:[],

      radio: '1',

      dialogVisible: false,  //修改按钮

      //搜索框
      msg: 'Welcome to Your Vue.js App',
      centerDialogVisible: false,
      isAddMembers: false,
      searchData: '',
      input: '',
      id: '',

      //审批数据
      user: [],

    }
  }
}
</script>
